iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
1
Modern Web

用30天了解javascript系列 第 1

[ 用30天了解javascript]Day1. 認識Javascript

  • 分享至 

  • xImage
  •  

Javascript一直都是受歡迎及使用廣泛的語言,Javascriptt始終名列前矛
https://ithelp.ithome.com.tw/upload/images/20200926/201120530Ig6BY7qu1.png
資料來源:2020 年 9 月 TIOBE 程式語言排行榜

Javascript會與其他應用程式搭配使用,常見的是應用在Web,與HTML、CSS搭配撰寫,透過瀏覽器讓網頁有互動效果。屬於直譯語言,不需事先編譯,直接在瀏覽器上執行。

網頁前端設計三大元素:

  • HTML:用來描述網頁內容
  • CSS:指定網頁呈現方式
  • Javascript:用來描述網頁行為

JavaScript 使用

1. <script> 標籤

必須位於<script></script>之間,可放置網頁的<head></head><body></body> 中。

<!--放在head-->
<!doctype html>
<html>
	<head>
	<script>
		程式碼
	</script>
	</head>
	<body>
	Javascript Page!
	</body>
</html>

<!--放在body-->
<html>
	<head></head>
	<body>
        <!-- 可改善顯示速度,因為腳本編譯會拖慢顯示-->
		<script>
			程式碼
		</script>
	</body>
</html>

2. 引用 JavaScript 檔案

寫在<script>標籤的src (source)屬性

優點:

  1. html與js方開方便閱讀及管理
  2. 已緩存的JavaScript 文件可加速頁面加載
<script src="JavaScript檔案位址.js"></script>

JavaScript 語法

  1. 分號 ; 結束
  2. 變數用來儲存和從變數中讀取資料
  3. 運算子:指定運算子、算術運算子
  4. 註解:單行註解 ( // ) 和多行註解 ( /* */ )
  5. 有區分大小寫

Javascript除錯

console.log vs alert

console.log

  • 在控制台輸出
  • 可以輸出任意類型

alert

  • 在頁面彈出
  • 只可輸出String類型
  • 有阻塞作用,當你寫很多alert時,不點彈跳視窗的確定,後面程式碼無法執行

下一篇
[用30天了解javascript]Day2.變數及資料型別
系列文
用30天了解javascript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言